<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar title="标题">
      <template #left>
        <span class="iconfont iconnew Iconnew"></span>
      </template>
      <template #title>
        <div class="serach">
          <van-icon name="search"
                    size="18" />
          <span>搜索商品</span>
        </div>
      </template>
      <template #right>
        <van-icon name="manager-o"
                  @click="$router.push({path:'/personal'})"
                  size="30"
                  color="#fff" />
      </template>
    </van-nav-bar>
    <!-- 内容导航 -->
    <van-tabs @click="cutTab">
      <van-tab v-for="item in categoryList"
               :title="item.name"
               :key="item.id">
        <van-button size="large" type="default">+</van-button>
        <!-- 
                上拉加载组件list
                v-model：绑定的变量表示当前数据是否加载完成，false表示加载完成，true表示没有加载完成
                finished：表示是否已经加载完所有数据（也就是数据库中的数据全部加载完了），true表示加载完了
                finished-text：设置加载完所有数据后的提示内容
                load：表示加载中触发的事件
                immediate-check：值为false，表示关闭load事件自动触发
                offset：关东条与底部距离小于 offset时触发事件
             -->
        <van-list v-model="loading"
                  :finished="finished"
                  finished-text="没有更多了"
                  offset="50"
                  :immediate-check="false"
                  @load="onLoad">
          <!-- 
                   下拉刷新组件van-pull-refresh
                   v-model：绑定的变量表示是否刷新完成
                   refresh：表示下拉刷新时会触发的一个事件
                -->
          <van-pull-refresh v-model="isLoading"
                            @refresh="onRefresh">
            <!--
                新闻列表
                默认情况下，自定义组件上不能绑定原生事件   、 
                此刻，我们就想要绑定怎么办？
                答：可以通过一个事件修饰符解决这个问题 native
            -->
            <NewsItem v-for="item in newsList"
                      :news="item"
                      @click.native="toDetail(item.id)"
                      :key="item.id" />
          </van-pull-refresh>
        </van-list>

      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import NewsItem from '../components/NewsItem.vue'
import { category } from '../api/common'
import { getNewsList } from '../api/news'
export default {
  components: { NewsItem },
  data() {
    return {
      categoryList: [], //存放栏目的数据
      curIndex: 1, //  表示当前栏目的下标值
      newsList: [], //新闻列表
      isLoading: false, //控制是否下拉刷新完成
      pageIndex: 1, //当前页数
      pageSize: 5, //每页的数据的数量
      loading: false, //是否在加载中
      finished: false, //是否加载完成
    }
  },
  created() {
    //   获取栏目列表并保存
    category().then((res) => {
      this.categoryList = res.data.data
      this.getNews()
    })
  },
  methods: {
    toDetail(id) {
      this.$router.push({ path: '/articaldetail' })
      localStorage.setItem('artId', id)
    },
    //   上拉加载会触发的函数
    onLoad() {
      //    获取下一页数据
      this.pageIndex++
      this.getNews()
    },
    // 下拉刷新
    onRefresh() {
      this.newsList = [] //解决key值（数据）重复问题
      this.pageIndex = 1 //解决刷新获取到不是第一页数据问题
      this.finished = false //解决上拉加载完成后 finished为true后，重新下拉刷新
      // 刷新功能，就是重新获取一下新闻列表即可
      this.getNews()
    },
    getNews() {
      //   获取新闻列表
      getNewsList({
        category: this.categoryList[this.curIndex].id,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
      }).then((res) => {
        // 合并数组，把 this.newsList里面的数据和 res.data.data合并起来
        this.newsList = [...this.newsList, ...res.data.data]
        // 数据成功请求回来后，需要把isLoading改为false
        this.isLoading = false
        // 数据成功请求回来后，需要把上拉加载Loading改为false
        this.loading = false
        // 当所有数据加载完成后，把 finished改为true
        // 那如何判断所有数据已经加载完成了呢(已经没有更多数据了)？
        // 答：当请求回来的数据数量少于我们请求的数据数据数量的时候，就说明已经没有更多数据了
        if (res.data.data.length < this.pageSize) {
          this.finished = true
        }
      })
    },
    cutTab(index) {
      this.curIndex = index
      this.newsList = [] //解决key值（数据）重复问题
      this.pageIndex = 1 //解决刷新获取到不是第一页数据问题
      this.finished = false //解决上拉加载完成后 finished为true后，重新下拉刷新
      // 刷新功能，就是重新获取一下新闻列表即可
      this.getNews()
    },
  },
}
</script>

<style lang="less" scoped>
.van-button{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 50px;
    text-align: center;
}
/deep/.van-nav-bar {
  background-color: rgb(255, 0, 0);
  .Iconnew {
    color: #fff;
    font-size: 50px;
  }
  .van-nav-bar__title {
    width: 60%;
    .serach {
      width: 100%;
      height: 30px;
      text-align: center;
      line-height: 30px;
      border-radius: 30px;
      background-color: #fff;
    }
  }
}

/deep/.van-tabs {
  .van-tabs__wrap {
    margin-right: 50px;
  }
}
</style>